import { useState, useEffect, useRef } from "react";
import { Dropdown, Button, Divider } from "antd";
import moment from "moment";
import CommonTable from "@/components/CommonTable";
import CommonPagination from "@/components/CommonPagination";
import CommonLoading from "@/components/CommonLoading";
import { queryOtherConfigPage } from "../../service";
import { cloneDeep } from "lodash";

const initPagination = {
	current: 1,
	total: 0,
	pageSize: 20,
	showQuickJumper: true,
	pageSizeOptions: [10, 20, 50, 500]
};

const dateFormat = "YYYY-MM-DD HH:mm:ss";

export default ({ visible, tableKey, query }) => {
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState([]);
	const [pagination, setPagination] = useState(null); //分页数据

	const stageParams = useRef({});

	const columns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			fixed: "left",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: "店铺",
			dataIndex: "ecStoreName",
			key: "ecStoreName",
			width: 120
		},
		{
			title: "店铺编码",
			dataIndex: "ecStoreCode",
			key: "ecStoreCode",
			width: 120
		},
		{
			title: "操作人",
			dataIndex: "operationName",
			key: "operationName",
			width: 120
		},
		{
			title: "操作时间",
			dataIndex: "operationTime",
			key: "operationTime",
			width: 120
		},
		{
			title: "操作类型",
			dataIndex: "operationTypeDesc",
			key: "operationTypeDesc",
			width: 120
		},
		{
			title: "操作内容",
			dataIndex: "operationContent",
			key: "operationContent",
			width: 120
		}
	];

	//columns渲染
	const columnsRender = () => {
		const arr = cloneDeep(columns);
		if (query.businessType == 10) {
			arr.splice(1, 2);
			return arr;
		} else if (query.businessType == 20) {
			//店铺状态隐藏操作内容
			arr.splice(6, 1);
			return arr;
		} else {
			return columns;
		}
	};

	useEffect(() => {
		if (tableKey) {
			setPagination({
				...(pagination || initPagination),
				current: 1
			});
		}
	}, [tableKey]);

	useEffect(() => {
		if (visible) {
			if (pagination) {
				getTableListFunc();
			}
		}
	}, [visible, pagination]);

	const getTableListFunc = async () => {
		setLoading(true);
		const params = {
			...query,
			size: pagination.pageSize,
			current: pagination.current
		};
		if (params.operationTime) {
			params.gtOperationTime = moment(params.operationTime[0]._d).format(dateFormat);
			params.ltOperationTime = moment(params.operationTime[1]._d).format(dateFormat);
		}
		params.operationTime = undefined;
		stageParams.current = params;
		const { data, success } = await queryOtherConfigPage(params);
		if (success) {
			const { records = [], total = 0 } = data || {};
			pagination.total = total;
			setData(records);
		}
		setLoading(false);
	};

	//表格
	const tableProps = {
		data,
		columns: columnsRender(),
		// handleRowKey(record) {
		// 	return record.matchingGoods.goodsId + record.platformGoods.id;
		// },
		scroll: { y: 300 }
	};

	const pageProps = {
		pagination,
		handleChange(current, size) {
			setPagination({
				...pagination,
				current: current == pagination.current ? 1 : current,
				pageSize: size
			});
		}
	};

	return (
		<>
			<CommonTable {...tableProps} />
			{/* <Divider style={{ marginTop: "24px" }} /> */}
			<div style={{ height: "65px", paddingTop: "20px" }}>
				<CommonPagination {...pageProps} />
			</div>
			<CommonLoading loading={loading} />
		</>
	);
};
